<template>
  <div>
    <gantt-elastic
      :options="options"
      :tasks="tasks"
      :dynamicStyle="dynamicStyle1"
      @tasks-changed="tasksUpdate"
      @options-changed="optionsUpdate"
      @dynamic-style-changed="styleUpdate"
    >
      <gantt-header slot="header"></gantt-header>
    </gantt-elastic>
    <div class="q-mt-md" />
    <el-button @click="addTask" icon="mdi-plus" label="Add task"
      >添加任务
    </el-button>
  </div>
</template>

<style>
</style>

<script>
import GanttElastic from "gantt-elastic";
import GanttHeader from "gantt-elastic-header";
import dayjs from "dayjs";
import * as moment from "moment";

// just helper to get current dates
function getDate(hours) {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  const currentDay = currentDate.getDate();
  const timeStamp = new Date(
    currentYear,
    currentMonth,
    currentDay,
    0,
    0,
    0
  ).getTime();
  return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}
let tasks = [
  {
    id: 1,
    label: "大任务1",
    user: '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
    start: getDate(-24 * 5),
    duration: 15 * 24 * 60 * 60 * 1000,
    percent: 85,
    type: "project",
    background:'#0eac51'
    // collapsed: false,
  },
  {
    id: 2,
    label: "任务2",
    user: '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
    parentId: 1,
    start: getDate(-24 * 4),
    duration: 4 * 24 * 60 * 60 * 1000,
    percent: 50,
    type: "milestone",
    collapsed: true,
    background:'#0eac51',
    style: {
      base: {
        fill: "#333333",
        stroke: "#0EAC51",
      },
    },
  },
  {
    id: 3,
    label: "任务2-2",
    user: '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
    parentId: 2,
    start: "2023-02-26",
    end: "2023-12-01",
    duration: moment("2023-12-31") - moment("2023-02-26"), //时间差
    percent: 10,
    type: "milestone",
    background:'#0eac51',
    style: {
      // 进度条颜色
      base: {
        fill: "#1EBC61",
        stroke: "#0EAC51",
      },
    },
  },
  {
    id: 30,
    label: "任务2-3",
    user: '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
    parentId: 2,
    start: getDate(-24 * 3),
    duration: 2 * 24 * 60 * 60 * 1000,
    percent: 70,
    type: "task",
    dependentOn: [3, 6],
    background:'#0eac51',
    style: {
      base: {
        fill: "#0287D0",
        stroke: "#0077C0",
      },
      // 连接线的颜色
      "chart-dependency-lines-path": {
        // fill: "#333333",
        stroke: "#0077C0",
      },
    },
  },
  {
    id: 4,
    label: "Put that toy AWAY!",
    user: '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
    start: getDate(-24 * 2),
    duration: 2 * 24 * 60 * 60 * 1000,
    percent: 50,
    type: "task",
    background:'red'
  },
  {
    id: 5,
    label:
      "One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.",
    user: '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',
    parentId: 4,
    start: getDate(0),
    duration: 2 * 24 * 60 * 60 * 1000,
    percent: 10,
    type: "milestone",
    background:'red',
    style: {
      base: {
        fill: "#0287D0",
        stroke: "#0077C0",
      },
    },
  },
  {
    id: 6,
    label: "Butch Mario and the Luigi Kid",
    user: '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',
    parentId: 5,
    start: getDate(24),
    duration: 1 * 24 * 60 * 60 * 1000,
    percent: 50,
    type: "task",
    collapsed: true,
    background:'red',
    style: {
      base: {
        fill: "#333333",
        stroke: "#7E349D",
      },
    },
  },
  {
    id: 7,
    label: "Devon, the old man wanted me, it was his dying request",
    user: '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',
    parentId: 2,
    dependentOn: [6],
    start: getDate(24 * 2),
    duration: 4 * 60 * 60 * 1000,
    percent: 20,
    type: "task",
    collapsed: true,
    background:'#8E44AD',
  },
  {
    id: 8,
    label: "Hey, Baby! Anybody ever tell you I have beautiful eyes?",
    user: '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',
    parentId: 7,
    dependentOn: [7],
    start: getDate(24 * 3),
    duration: 1 * 24 * 60 * 60 * 1000,
    percent: 0,
    type: "task",
    background:'#8E44AD',
  },
  {
    id: 9,
    label:
      "This better be important, woman. You are interrupting my very delicate calculations.",
    user: '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',
    parentId: 8,
    dependentOn: [8, 7],
    start: getDate(24 * 4),
    duration: 4 * 60 * 60 * 1000,
    percent: 20,
    type: "task",
    background:'#8E44AD',
    style: {
      base: {
        fill: "#8E44AD",
        stroke: "#7E349D",
      },
    },
  },
  {
    id: 10,
    label: "current task",
    user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
    start: getDate(24 * 5),
    duration: 24 * 60 * 60 * 1000,
    percent: 0,
    type: "task",
    background:'#8E44AD',
  },
  {
    id: 11,
    label: "test task",
    user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
    start: getDate(24 * 6),
    duration: 24 * 60 * 60 * 1000,
    percent: 0,
    type: "task",
    background:'#8E44A1',
  },
  {
    id: 12,
    label: "test task",
    user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
    start: getDate(24 * 7),
    duration: 24 * 60 * 60 * 1000,
    percent: 0,
    type: "task",
    parentId: 11,
    background:'#8E44A1',
  },
  {
    id: 13,
    label: "test task",
    user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
    start: getDate(24 * 8),
    duration: 24 * 60 * 60 * 1000,
    percent: 0,
    type: "task",
    background:'#8E44A1',
  },
  {
    id: 14,
    label: "test task",
    user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
    start: getDate(24 * 9),
    duration: 24 * 60 * 60 * 1000,
    percent: 0,
    type: "task",
    background:'#8E44A1',
  },
  {
    id: 15,
    label: "test task",
    user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',
    start: getDate(24 * 16),
    duration: 24 * 60 * 60 * 1000,
    percent: 0,
    type: "task",
    background:'#8E44A1',
  },
];
let options = {
  taskMapping: {
    progress: "percent",
  },
  maxRows: 100,
  maxHeight: 500,
  title: {
    label: "Your project title as html (link or whatever...)",
    html: false,
  },
  calendar: {
    workingDays: [1, 2, 3, 4, 5, 6], //*
    gap: 0,
    strokeWidth: 5,
    hour: {
      display: false,
    },
  },

  locale: {
    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    months: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
  },
  chart: {
    progress: {
      bar: false,
    },
    // 图表是否显示扩展器
    expander: {
      display: true,
    },
  },
  taskList: {
    expander: {
      straight: true,
    },

    columns: [
      {
        id: 1,
        label: "ID",
        value: "id",
        width: 40,
        style: {
          // 列的样式
          // "task-list-item-column": { background: "red" },
          // 列里value的样式
          // "task-list-item-value": { background: "red" },
        },
      },
      {
        id: 2,
        label: "Description",
        value: "label",
        width: 200,
        expander: true,
        html: true,
        events: {
          click({ data, column }) {
            alert("description clicked!\n" + data.label);
          },
        },
      },
      {
        id: 3,
        label: "负责人",
        value: "user",
        width: 130,
        html: true,
      },
      {
        id: 3,
        label: "开始时间",
        value: (task) => dayjs(task.start).format("YYYY-MM-DD"),
        width: 78,
      },
      {
        id: 4,
        label: "Type",
        value: "type",
        width: 68,
      },
      {
        id: 5,
        label: "%",
        value: "progress",
        width: 35,
        style: {
          "task-list-header-label": {
            "text-align": "center",
            width: "100%",
          },
          "task-list-item-value-container": {
            "text-align": "center",
            width: "100%",
          },
        },
      },
    ],
  },
};

export default {
  name: "Gantt",
  components: {
    GanttElastic,
    GanttHeader,
  },
  data() {
    return {
      tasks,
      options,
      dynamicStyle: {
        "main-view":{
          background:'none',
        },
        // "task-list-row-1":{
        //   background:'red',
        // }
        // task-list-row-${task.id}
      },
      lastId: 16,
    };
  },
  mounted(){
    this.$nextTick(()=>{
      this.setStyle();
    })
  },
  computed:{
    dynamicStyle1(){
      return this.dynamicStyle;
    },
  },
  methods: {
    setStyle(){
      this.dynamicStyle={
        ...this.dynamicStyle,
        ...this.setTaskRow(),
      };
      console.log(this.dynamicStyle,"shishen");
    },
    setTaskRow(){
      let obj={};
      this.tasks.forEach((i,ind)=>{
        obj={
          ...obj,
          [`task-list-row-${i.id}`]:{
            background:i.background
          }
        }
      })
      return obj;
    },
    addTask() {
      this.tasks.push({
        id: this.lastId++,
        label:
          '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
        user: '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
        start: getDate(24 * 3),
        duration: 1 * 24 * 60 * 60 * 1000,
        percent: 50,
        type: "project",
      });
      console.log(this.tasks[this.tasks.length - 1].start, "===>");
    },
    tasksUpdate(tasks) {
      this.tasks = tasks;
    },
    optionsUpdate(options) {
      this.options = options;
    },
    styleUpdate(style) {
      console.log(style,"样式");
      this.dynamicStyle = style;
    },

  },
};
</script>
<style>
bady {
  color: #0eac51;
}
</style>